<template>
  <div>
    <el-drawer
      :visible.sync="visible"
      :title="'我的主题'"
      direction="rtl"
      append-to-body
      :before-close="handleCancel"
      @open="handleOpen"
    >
      <div style="margin: 5px">
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="handleConfirm"
        >保存</el-button>
        <el-button
          type="primary"
          class="pause-button"
          icon="el-icon-refresh"
          @click="handleReset"
        >重置</el-button>
      </div>
      <yq-form>
        <el-container>
          <el-header>
            <label>背景</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.body_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'body_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>侧边栏及顶部</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="侧边栏颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.sideBarColor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'sideBarColor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="选中颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.sideBarSelectColor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'sideBarSelectColor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>弹框</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="标头颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.dialog_head_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'dialog_head_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="内容颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.dialog_body_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'dialog_body_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>tab栏</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="head颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tab_head_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tab_head_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="内容颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tab_item_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tab_item_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="激活颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tab_acitive_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tab_acitive_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>折叠框</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="head颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.dialog_head_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'dialog_head_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="body颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.dialog_body_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'dialog_body_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <!-- <el-container>
          <el-header>
            <label>悬浮框</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.popover_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'popover_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container> -->
        <el-container>
          <el-header>
            <label>树形结构</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="tree背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tree_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tree_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="tree内容颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tree_content_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tree_content_color')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="tree边框颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tree_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tree_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>顶部导航条</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="tag背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tag_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tag_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="单元背景"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tag_view_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tag_view_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="单元字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tag_view_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tag_view_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="选中单元背景"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tag_view_active_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tag_view_active_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="选中单元字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.tag_view_active_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'tag_view_active_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>表格</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.table_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'table_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="单行颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.table_single_row_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'table_single_row_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="双行颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.table_double_row_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'table_double_row_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="表格字体颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.table_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'table_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="表头字体颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.table_head_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'table_head_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="选择颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.current_row_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'current_row_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="悬浮颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.hover_row_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'hover_row_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>卡片</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="头部背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_head_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_head_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="头部字体颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_head_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_head_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="头部边框颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_head_bottom_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_head_bottom_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_body_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_body_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="字体颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.card_body_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'card_body_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>按钮</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="普通按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.button_color1"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'button_color1')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="失效按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.button_color2"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'button_color2')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮边框"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="提示按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.message_button_color1"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'message_button_color1')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮边框"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="提示按钮1"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.message_button_color1"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'message_button_color1')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="提示按钮2"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.message_button_color2"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'message_button_color2')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="提示按钮3"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.message_button_color3"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'message_button_color3')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="表格操作按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.icon_disabled_button_color"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'icon_disabled_button_color')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
        <el-container>
          <el-header>
            <label>输入框</label>
          </el-header>
          <el-main>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="边框颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="背景颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="字体颜色"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮边框"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="暂停按钮字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.pause_button_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'pause_button_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="提示按钮"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.message_button_color1"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'message_button_color1')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="失效边框"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_disabled_bordercolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_disabled_bordercolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="失效背景"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_disabled_bgcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_disabled_bgcolor')}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="失效字体"
                  prop=""
                >
                  <el-color-picker
                    v-model="list.input_disabled_fontcolor"
                    show-alpha
                    :predefine="colorList"
                    @change="val => {handleChange(val, 'input_disabled_fontcolor')}"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </yq-form>
    </el-drawer>
  </div>
</template>
<script>
import YqForm from '@/components/YqForm'
export default {
  name: 'MyTheme',
  components: {
    YqForm
  },
  // 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，
  // 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
  model: {
    prop: 'color',
    event: 'update'
  },
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    // 颜色数组
    colorList: {
      type: Array,
      default: () => {
        return ['#FFC0CB', '#FF1493', '#DC143C',
          '#FF00FF', '#9370DB', '#800080', '#6495ED',
          '#4169E1', '#0000FF', '#E1FFFF', '#00FFFF',
          '#00FF7F', '#008000', '#FFFFE0', '#FFFF00',
          '#FFD700', '#F5DEB3', '#FFA500', '#CD5C5C']
      }
    },
    // 父组件绑定的值
    color: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      myTheme: localStorage.getItem('theme') === 'my',
      originList: {
        // 字体
        font_color1: '#000000',
        font_color2: '#000000',
        form_fontcolor: '#606266',
        // 侧边栏
        sideBarColor: '#1B2B71',
        sideBarSelectColor: '#ffa500',
        // table
        table_double_row_bgcolor: '#eff7fe',
        table_single_row_bgcolor: '#fff',
        table_bgcolor: '#F7F9FE',
        table_fontcolor: '#000000',
        table_head_fontcolor: '#000000',
        current_row_color: '#BECCEA',
        hover_row_color: 'rgba(190, 204, 234, 0.4)',
        // input
        input_bordercolor: '#d5d5d5',
        input_bgcolor: '#fff',
        input_fontcolor: '#000000',
        input_disabled_bordercolor: '#cbcccf',
        input_disabled_bgcolor: '#eff0f2',
        input_disabled_fontcolor: '#5f6063',
        // button
        button_color1: '#026FFF',
        button_color2: '#026FFF',
        native_button_color: '#fff',
        native_button_fontcolor: '#000000',
        pause_button_color: '#F4F5F7',
        pause_button_bordercolor: '#026FFF',
        pause_button_fontcolor: '#1B2B71',
        message_button_color1: '#026FFF',
        message_button_color2: '#1B2B71',
        message_button_color3: '#fff',
        icon_disabled_button_color: '#808080',
        // 背景
        body_bgcolor: '#F4F5F7',
        background_color1: '#fff',
        background_color2: '#1B2B71',
        // dialog
        dialog_head_color: '#026FFF',
        dialog_body_color: '#eff3fb',
        // tree
        tree_color: null,
        tree_content_color: '#4086e4',
        tree_bordercolor: '#bdb1b1',
        // container
        container_body_color: null,
        // card
        card_color1: '#fff',
        card_bgcolor: '#fff',
        card_head_bgcolor: '#e6ebf5',
        card_head_fontcolor: '#000000',
        card_head_bottom_bordercolor: '#e6ebf5',
        card_body_bgcolor: null,
        card_body_fontcolor: '#000000',
        // tab
        tab_head_color: '#fff',
        tab_item_color: '#BECCEA',
        tab_acitive_color: '#1B2B71',
        // popover
        popover_bgcolor: null,
        // tagView
        tag_bgcolor: '#fff',
        tag_view_bgcolor: '#fff',
        tag_view_fontcolor: '#000000',
        tag_view_active_bgcolor: '#ffa500',
        tag_view_active_fontcolor: '#fff',
        // splitpanes
        splitpanes_color: '#fff',
        // collapse
        collapse_head_bgcolor: '#eff3fb',
        collapse_head_fontcolor: '#000000',
        collapse_body_bgcolor: '#fff',
        // checkbox
        checkbox_fontcolor: '#606266',
        // pagination
        pagination_btncolor: '#f4f4f5',
        pagination_fontcolor: '#606266',
        // divider
        divider_color: '#DCDFE6'
      },
      list: {
        // 字体
        font_color1: '#000000',
        font_color2: '#000000',
        form_fontcolor: '#606266',
        // 侧边栏
        sideBarColor: '#1B2B71',
        sideBarSelectColor: '#ffa500',
        // table
        table_double_row_bgcolor: '#eff7fe',
        table_single_row_bgcolor: '#fff',
        table_bgcolor: '#F7F9FE',
        table_fontcolor: '#000000',
        table_head_fontcolor: '#000000',
        current_row_color: '#BECCEA',
        hover_row_color: 'rgba(190, 204, 234, 0.4)',
        // input
        input_bordercolor: '#d5d5d5',
        input_bgcolor: '#fff',
        input_fontcolor: '#000000',
        input_disabled_bordercolor: '#cbcccf',
        input_disabled_bgcolor: '#eff0f2',
        input_disabled_fontcolor: '#5f6063',
        // button
        button_color1: '#026FFF',
        button_color2: '#026FFF',
        native_button_color: '#fff',
        native_button_fontcolor: '#000000',
        pause_button_color: '#F4F5F7',
        pause_button_bordercolor: '#026FFF',
        pause_button_fontcolor: '#1B2B71',
        message_button_color1: '#026FFF',
        message_button_color2: '#1B2B71',
        message_button_color3: '#fff',
        icon_disabled_button_color: '#808080',
        // 背景
        body_bgcolor: '#F4F5F7',
        background_color1: '#fff',
        background_color2: '#1B2B71',
        // dialog
        dialog_head_color: '#026FFF',
        dialog_body_color: '#eff3fb',
        // tree
        tree_color: null,
        tree_content_color: '#4086e4',
        tree_bordercolor: '#bdb1b1',
        // container
        container_body_color: null,
        // card
        card_color1: '#fff',
        card_bgcolor: '#fff',
        card_head_bgcolor: '#e6ebf5',
        card_head_fontcolor: '#000000',
        card_head_bottom_bordercolor: '#e6ebf5',
        card_body_bgcolor: null,
        card_body_fontcolor: '#000000',
        // tab
        tab_head_color: '#fff',
        tab_item_color: '#BECCEA',
        tab_acitive_color: '#1B2B71',
        // popover
        popover_bgcolor: null,
        // tagView
        tag_bgcolor: '#fff',
        tag_view_bgcolor: '#fff',
        tag_view_fontcolor: '#000000',
        tag_view_active_bgcolor: '#ffa500',
        tag_view_active_fontcolor: '#fff',
        // splitpanes
        splitpanes_color: '#fff',
        // collapse
        collapse_head_bgcolor: '#eff3fb',
        collapse_head_fontcolor: '#000000',
        collapse_body_bgcolor: '#fff',
        // checkbox
        checkbox_fontcolor: '#606266',
        // pagination
        pagination_btncolor: '#f4f4f5',
        pagination_fontcolor: '#606266',
        // divider
        divider_color: '#DCDFE6'
      },
      back: 0,
    }
  },
  watch: {
    color: function (val) {
      this.setSelectColor(val)
    }
  },
  created() {
    if (this.color && this.color.length > 0) {
      this.myColor = this.color
      this.setSelectColor(this.color)
    }
  },
  methods: {
    handleOpen() {
      this.back = 0
      const styleList = JSON.parse(localStorage.getItem('myTheme'))
      Object.assign(this.list, styleList)
    },
    handleCancel() {
      if (this.back === 1) {
        this.$confirm('该主题暂未保存刷新浏览器将会失效, 是否保存修改的主题', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.setItem('theme', 'my')
          localStorage.setItem('themePart', 'part')
          localStorage.setItem('myTheme', JSON.stringify(this.list))
          this.$emit('update:visible', false)
        })
      } else {
        this.$emit('update:visible', false)
      }
    },
    handleConfirm() {
      localStorage.setItem('theme', 'my')
      localStorage.setItem('themePart', 'part')
      localStorage.setItem('myTheme', JSON.stringify(this.list))
      window.location.reload()
    },
    handleReset() {
      localStorage.setItem('theme', 'my')
      localStorage.setItem('themePart', 'part')
      localStorage.setItem('myTheme', JSON.stringify(this.originList))
      window.location.reload()
    },
    // 设置颜色选择框中颜色
    setSelectColor(color, name) {
      const root = document.querySelector(':root')
      root.style.setProperty(name, color)
    },
    handleChange(color, name) {
      if (name === 'sideBarColor' || name === 'sideBarSelectColor') {
        const params = {
          sideBarColor: this.list.sideBarColor,
          sideBarSelectColor: this.list.sideBarSelectColor
        }
        Object.assign(this.list, params)
        localStorage.setItem('myTheme', JSON.stringify(this.list))
        this.$bus.$emit('sideBarColor', params)
      } else {
        this.setSelectColor(color, '--' + name)
      }
      this.back = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.se {
  display: inline-block;
}
.el-container {
  border-top: 1px solid grey;
  padding-top: 5px;
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 18px;
  font-size: 15px;
  height: 18px !important;
}
.el-main {
  color: #333;
  line-height: 120px !important;
}
/deep/.el-form-item__label {
  font-size: 12px;
  padding: 0 6px 0 0;
  color: #606266 !important;
}
/deep/ .el-color-picker--mini .el-color-picker__trigger {
  width: 70px;
}
</style>
